<template>
	<view class="container bg-liner">
		<!-- 待办事项 -->
		<wd-cell  is-link to="/packageA/pages/notice/tree" >
      <template #title>
        <wd-badge :modelValue="badgeNumber">
          <span style="padding-right: 19px;">待办事项 </span> 
        </wd-badge>
      </template>
    </wd-cell>
		<!-- 跳转tab -->
		<view class="grid-class">
			 <image class="grid-img" v-for="_ in cardList"  @click="handleCardClick(_)" :src="_.img" mode="widthFix" />
		</view>
    <view 
  class="fab-button"
  @click="showMore = true"
>
  <wd-icon name="more" color="#FFF" size="24px"></wd-icon>
</view>
    <!-- <wd-button custom-style="margin: 0 32rpx;" block @click="showMore=true">更多</wd-button> -->
    <!-- 更多菜单弹出层 -->
  <wd-popup v-model="showMore" position="bottom" custom-style="border-radius: 16rpx 16rpx 0 0;">
    <view class="more-menu">
      <wd-cell 
        v-for="item in moreMenus" 
        :key="item.id"
        :title="item.title" 
        is-link
        @click="handleMenuClick(item)"
      />
    </view>
  </wd-popup>
	</view>
  <view class="container">
    
    
    <!-- 统计卡片 -->
    <stats-card
      title="上报统计"
      :stats="reportStats"
      :time-value="reportTime"
      @time-change="handleReportTimeChange"
    />
    
    <stats-card
      title="转设计统计"
      :stats="designerStats"
      :time-value="designerTime"
      @time-change="handleDesignerTimeChange"
    />
    
    <!-- 施工统计 -->
    <stats-card
      title="施工统计"
      :stats="engineeringStats"
      :show-time-filter="false"
    />
    
    <!-- 产值统计 -->
    <stats-card
      title="产值统计"
      :stats="moneyStats"
      :time-value="moneyTime"
      @time-change="handleMoneyTimeChange"
    />
	<!-- 渠道统计 -->
	<stats-card
	  title="渠道统计"
	  :stats="channelStats"
	  :time-value="channelTime"
	  @time-change="handleChannelTimeChange"
	/>
	<!-- 销售业绩榜单 -->
	<rank-card
	  title="销售业绩榜单"
	  :rankList="saleRankList"
	  :time-value="saleTime"
	  @time-change="handleSaleTimeChange"
	 />
	<!-- 设计师业绩榜单 -->
	<rank-card
	  title="设计师业绩榜单"
	  :rankList="designerRankList"
	  :time-value="designerRankTime"
	  :is-sale="false"
	  @time-change="handleDesignerRankTimeChange"
	 />
  </view>
</template>

<script setup>
import { ref, computed, onMounted, watch, nextTick } from 'vue';
import { getTimeRange,getPieChartDataSet } from '@/utils/time.js';
import { 
  homeDesignerStatistics, 
  homeEngineeringStatistics, 
  homeMoneyStatistics, 
  homeReportStatistics,
  homeChannelStatistics,
  homeSaleRanking,
  homeDesignerRanking
} from '@/api/index/index';
import {
  getNoticeList
} from '@/api/notice/list.js';

// 常用功能卡片
const cardList = [
  {  path: '/packageA/pages/order/index', img:'https://ghj-file.oss-cn-shenzhen.aliyuncs.com/client - e11dc8331d5ef0a3e4db485dfa42ab9fcd90b1dad0207e72da3400ea9dddfe75.jpg' },
  {  path: '/packageA/pages/design/index', img:'https://ghj-file.oss-cn-shenzhen.aliyuncs.com/client - 2902e59b5cb0ca3bb1bea26a8962969be46a6ffa22c130da47fd9e1f7f830f31.jpg' },
  {  path: '/packageA/pages/project/engineering', img:'https://ghj-file.oss-cn-shenzhen.aliyuncs.com/client - 34b55c9e727a6100bc14397705056587e7000ae758767da2979d890dae8352d5.jpg' }
];

// 时间选项
const timeDate = [
  { value: 1, text: '本周' },
  { value: 2, text: '本月' },
  { value: 3, text: '本年' },
  { value: 4, text: '全部' },
];

// 上报统计
const reportTime = ref(2);
const reportData = ref({ allNum: 0, feiDanNum: 0, ghNum: 0 });

const reportStats = computed(() => [
  { label: '总数', value: reportData.value.allNum, unit: '条' },
  { label: '废单', value: reportData.value.feiDanNum, unit: '条' },
  { label: '公海', value: reportData.value.ghNum, unit: '条' }
]);

// 设计
const designerTime = ref(2)
const designerDate = ref({
  allNum: 0,
  feiDanNum: 0,
  ghNum: 0
})
const designerStats = computed(() => [
  { label: '总数', value: designerDate.value.allNum, unit: '条' },
  { label: '废单', value: designerDate.value.feiDanNum, unit: '条' },
  { label: '公海', value: designerDate.value.ghNum, unit: '条' }
]);
// 施工
const engineeringStatistics = ref({
  tuiDan: 0,
  tingGong: 0,
  shiGongZhong: 0,
  junGong: 0,
  daiKaiGong: 0,
})

const engineeringStats = computed(() => [
  { label: '待开工', value: engineeringStatistics.value.daiKaiGong, unit: '套' },
  { label: '施工中', value: engineeringStatistics.value.shiGongZhong, unit: '套' },
  { label: '工程已竣工', value: engineeringStatistics.value.junGong, unit: '套' },
  { label: '工程已停工', value: engineeringStatistics.value.tingGong, unit: '套' },
  { label: '退单', value: engineeringStatistics.value.tuiDan, unit: '套' },

]);
const moneyTime = ref(4);
const moneyData = ref({
  zhengMoney: 0,
  productMoney: 0,
  singleMoney: 0
})

const moneyStats = computed(() => [
  { label: '整装合同', value: moneyData.value.zhengMoney, unit: '元' },
  { label: '产品合同', value: moneyData.value.productMoney, unit: '元' },
  { label: '单品合同', value: moneyData.value.singleMoney, unit: '元' }
]);
// 处理时间变化
const handleReportTimeChange = async (e) => {
  const params = (e||reportTime.value) === 4 ? {beginTime:'',endTime:''} : getTimeRange((e||reportTime.value));
  try {
    const data = await homeReportStatistics(params);
    reportData.value = data;
  } catch (error) {
    uni.showToast({ title: '获取数据失败', icon: 'none' });
  }
};
// 处理时间变化
const handleDesignerTimeChange = async (e) => {
	
  const params = (e||designerTime.value) === 4 ? {beginTime:'',endTime:''} : getTimeRange((e||designerTime.value));
  try {
    const data = await homeDesignerStatistics(params);
    designerDate.value = data;
  } catch (error) {
    uni.showToast({ title: '获取数据失败', icon: 'none' });
  }
};
const handleEngineeringTimeChange = async () => {
 
  try {
    const data = await homeEngineeringStatistics();
    engineeringStatistics.value = data;
  } catch (error) {
    uni.showToast({ title: '获取数据失败', icon: 'none' });
  }
};
const handleMoneyTimeChange = async (e) => {
  const params = (e||designerTime.value) === 4 ? {beginTime:'',endTime:''} : getTimeRange((e||designerTime.value));
  try {
    const data = await homeMoneyStatistics(params);
    moneyData.value = data;
  } catch (error) {
    uni.showToast({ title: '获取数据失败', icon: 'none' });
  }
};
// 渠道统计
const channelTime = ref(2)
const channelData = ref([])
const channelStats = computed(() => {
  return channelData.value.map(item => ({
    label: item.name,
    value: item.value,
    unit: '位'
  }))
})
const handleChannelTimeChange = async (e) => {
  const params = (e || channelTime.value) === 4 ? {beginTime: '', endTime: ''} : getTimeRange((e || channelTime.value))
  try {
    const data = await homeChannelStatistics(params)
    channelData.value = data
  } catch (error) {
    uni.showToast({ title: error, icon: 'none' })
  }
}
// 销售业绩榜单
const saleTime = ref(2)
const saleRankList = ref([])

const handleSaleTimeChange = async (e) => {
  const params = (e || saleTime.value) === 4 ? {beginTime: '', endTime: ''} : getTimeRange((e || saleTime.value))
  try {
    const data = await homeSaleRanking(params)
    saleRankList.value = data
  } catch (error) {
    uni.showToast({ title: error, icon: 'none' })
  }
}
// 设计师业绩
const designerRankTime = ref(2)
const designerRankList = ref([])

const handleDesignerRankTimeChange = async (e) => {
  const params = (e || designerRankTime.value) === 4 ? {beginTime: '', endTime: ''} : getTimeRange((e || designerRankTime.value))
  try {
    const data = await homeDesignerRanking(params)
    designerRankList.value = data
  } catch (error) {
    uni.showToast({ title: error, icon: 'none' })
  }
}
const badgeNumber = ref(0)
const handleNoticeList = async() => {
  const params = {
    isRead: '0',
    pageNo: 1,
    pageSize: 10
  }
  try {
      const data = await getNoticeList(params)
      console.log(data,'data');
      
      
      badgeNumber.value=data.total
    
    } catch (error) {
      uni.showToast({
        title: String(error) || '获取数据失败',
        icon: 'error'
      })
    } finally {
    }
}
// 初始化数据
onMounted(() => {
  handleReportTimeChange();
  handleDesignerTimeChange()
  handleEngineeringTimeChange()
  handleMoneyTimeChange()
  handleChannelTimeChange()
  handleSaleTimeChange()
  handleDesignerRankTimeChange()
  handleNoticeList()
});

// 处理卡片点击
const handleCardClick = (item) => {
  uni.navigateTo({ url: item.path });
};
const showMore = ref(false)
const moreMenus = [
      { id: 1, title: '审批列表', path: '/packageA/pages/approve/list' },
      // { id: 2, title: '菜单项2', path: '/path2' },
      // { id: 3, title: '菜单项3', path: '/path3' }
    ]
const handleMenuClick = (item) => {
  console.log(item);
  showMore.value = false
    uni.navigateTo({
      url: item.path
    })
}
</script>

<style lang="scss" scoped>
	.bg-liner {
		background: linear-gradient(180deg, #c4d7ff 0%, #ffffff 100%);
	}
	.container {
		padding: 20px;
		font-size: 14px;
		display: flex;
		flex-direction: column;
		gap: 10px; /* 这是子元素之间的间距 */
		:deep(.wd-cell) {
			border-radius: 48rpx;
		}
	
		.grid-class {
			display: flex;
			justify-content: space-between;
			margin: 10rpx -16rpx;
		}
		.grid-img {
			width: 100%;
			margin: 16rpx 16rpx 0;
			border-radius: 26rpx;
		}
		.form .form-item {
			border: none;
			margin-bottom: 0rpx;
			
		}
		.form .form-item .label {
			font-size: 28rpx;
			margin-bottom: 0rpx;
		}
	}
  .fab-button {
    position: fixed;
    right: 40rpx;
    bottom: 80rpx;
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
    box-shadow: 0 8rpx 24rpx rgba(118, 75, 162, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
  }
</style>